<!-- 标准管理->项目合作标准->新增/编辑/查看 -->
<template>
    <div class="projectCooperate">
        <el-breadcrumb separator="/" class="bread-title">
			<el-breadcrumb-item :to="{ path: '/projectCooperate' }">项目合作标准</el-breadcrumb-item>
			<el-breadcrumb-item>{{pageType}}</el-breadcrumb-item>
		</el-breadcrumb>
       <el-form ref="typeForm" :rules="rules" :model="typeForm" label-width="205px"  style="width:600px">
           <div class="type-item-box">
                <p class="type-item-title">基本信息</p>
                 <el-form-item label="标准名称：" prop="name">
                        <el-input v-if="typeStatus !='view'" v-model.trim="typeForm.name" autocomplete="off"></el-input>
                        <span v-else>{{typeForm.name}}</span>
                 </el-form-item>
                 <el-form-item label="业务线：" prop="lineBusiness">
                        <el-select v-if="typeStatus !='view'" v-model.trim="typeForm.lineBusiness"  :disabled="inputDisabled" placeholder="">
                            <el-option 
                            v-for="({label,value},index) in businessLineOptions" 
                            :key="index" 
                            :label="label" 
                            :value="value"></el-option>
                        </el-select>
                        <span v-else>{{typeForm.lineBusiness | lineFilter}}</span>
                </el-form-item>
           </div>
           <div class="type-item-box">
                <p class="type-item-title">项目标准</p>
                 <el-form-item label="项目类型：" prop="lineType" >
                       <template v-if="typeStatus !='view'">
                            <el-radio v-model="typeForm.lineType" :disabled="inputDisabled" :label="1">内部项目</el-radio>
                            <el-radio v-model="typeForm.lineType" :disabled="inputDisabled" :label="0">外部项目</el-radio>
                        </template>
                        <span v-else>{{typeForm.lineType|typeFilter}}</span>
                 </el-form-item>
                 <el-form-item label="合作模式：" prop="lineCollaborat">
                        <el-select v-if="typeStatus !='view'" v-model.trim="typeForm.lineCollaborat" :disabled="inputDisabled"  placeholder="请选择合作模式">
                            <el-option 
                            v-for="({label,value},index) in modalOptions" 
                            :key="index" 
                            :label="label" 
                            :value="value"></el-option>
                        </el-select>
                         <span v-else>{{typeForm.lineCollaborat|modalFilter}}</span>
                </el-form-item>
                 <el-form-item label="有无预售证：" prop="inPresale">
                       <template v-if="typeStatus !='view'">
                            <el-radio v-model="typeForm.inPresale" :label="1">有</el-radio>
                            <el-radio v-model="typeForm.inPresale" :label="0">无</el-radio>
                        </template>
                        <span v-else>{{typeForm.inPresale?"有":"无"}}</span>
                 </el-form-item>
           </div>
           <div class="type-item-box">
                <p class="type-item-title">垫付标准</p>
                 <el-form-item label="是否垫佣：" prop="inPadCommission">
                       <template v-if="typeStatus !='view'">
                            <el-radio v-model="typeForm.inPadCommission" :label="1">是</el-radio>
                            <el-radio v-model="typeForm.inPadCommission" :label="0">否</el-radio>
                        </template>
                        <span v-else>{{typeForm.inPadCommission?'是':'否'}}</span>
                 </el-form-item>
                 <el-form-item label="垫佣开发商要求：" prop="inPadRanking">
                          <el-checkbox  v-if="typeStatus !='view'" v-model.number="typeForm.inPadRanking">全国排名前100</el-checkbox>
                          <span v-else>{{typeForm.inPadRanking==1?'全国排名前100':'无'}}</span>
                </el-form-item>
                 <el-form-item label="垫佣周期：" class="posterurl">
                       <div v-if="typeStatus !='view'" style="display:flex">
                           <el-form-item >
                                <el-select :disabled="!typeForm.inPadCommission" v-model.trim="typeForm.inPadExpiryEqual"  placeholder="请选择" style="margin-right:20px">
                                <el-option 
                                    v-for="({label,value},index) in sizeOptions" 
                                    :key="index" 
                                    :label="label" 
                                    :value="value"></el-option>
                                </el-select>
                        </el-form-item>
                        <el-form-item  prop="inPadExpiry">
                            <el-input :disabled="!typeForm.inPadCommission"  v-model.trim="typeForm.inPadExpiry" autocomplete="off"></el-input>
                         </el-form-item>
                         <div class="unit-box">个月</div>
                        </div>
                        <span v-else-if="typeForm.inPadExpiry">{{typeForm.inPadExpiryEqual|sizefilter }}{{typeForm.inPadExpiry}}个月</span>
                        <span v-else>无</span>
                 </el-form-item>
           </div>
           <div class="type-item-box">
                <p class="type-item-title">电商标准</p>
                 <el-form-item label="是否收电商：" prop="inEcommerce">
                       <template v-if="typeStatus !='view'">
                            <el-radio v-model="typeForm.inEcommerce" :label="1">是</el-radio>
                            <el-radio v-model="typeForm.inEcommerce" :label="0">否</el-radio>
                        </template>
                        <span v-else>{{typeForm.inEcommerce?"是":"否"}}</span>
                 </el-form-item>
                 <el-form-item label="电商政策：" prop="inEcommercePolicy">
                       <template v-if="typeStatus !='view'">
                            <el-radio v-model="typeForm.inEcommercePolicy" :label="1">允许</el-radio>
                            <el-radio v-model="typeForm.inEcommercePolicy" :label="2">不允许</el-radio>
                        </template>
                        <span v-else>{{typeForm.inEcommercePolicy==1?"允许":typeForm.inEcommercePolicy==2?"不允许":'无'}}</span>
                 </el-form-item>
           </div>
           <div class="type-item-box">
                <p class="type-item-title">费用标准</p>
                <el-form-item label="开发商佣金占比：" class="posterurl">
                      <div v-if="typeStatus !='view'" style="display:flex">
                           <el-form-item  prop="proporBusinessmanEqual">
                                <el-select v-model.trim="typeForm.proporBusinessmanEqual"  placeholder="请选择" style="margin-right:20px">
                                <el-option 
                                    v-for="({label,value},index) in sizeOptions" 
                                    :key="index" 
                                    :label="label" 
                                    :value="value"></el-option>
                                </el-select>
                        </el-form-item>
                        <el-form-item  prop="proporBusinessman">
                            <el-input  v-model.trim="typeForm.proporBusinessman" autocomplete="off"></el-input>
                         </el-form-item>
                         <div class="unit-box">%</div>
                        </div>
                        <span v-else>{{typeForm.proporBusinessmanEqual|sizefilter }} {{typeForm.proporBusinessman}}%</span>
                 </el-form-item>
                 <el-form-item label="好生活平台费用占比：" class="posterurl">
                       <div v-if="typeStatus !='view'" style="display:flex">
                           <el-form-item  prop="proporEasylifeEqual">
                                <el-select v-model.trim="typeForm.proporEasylifeEqual"  placeholder="请选择" style="margin-right:20px">
                                <el-option 
                                    v-for="({label,value},index) in sizeOptions" 
                                    :key="index" 
                                    :label="label" 
                                    :value="value"></el-option>
                                </el-select>
                        </el-form-item>
                        <el-form-item  prop="proporEasylife">
                            <el-input  v-model.trim="typeForm.proporEasylife" autocomplete="off"></el-input>
                         </el-form-item>
                         <div class="unit-box">%</div>
                        </div>
                        <span v-else>{{typeForm.proporEasylifeEqual|sizefilter }} {{typeForm.proporEasylife}}%</span>
                </el-form-item>
                 <el-form-item label="预测净利润占比：" class="posterurl">
                      <div v-if="typeStatus !='view'" style="display:flex">
                           <el-form-item  prop="proporNetprofitEqual">
                                <el-select v-model.trim="typeForm.proporNetprofitEqual"  placeholder="请选择" style="margin-right:20px">
                                <el-option 
                                    v-for="({label,value},index) in sizeOptions" 
                                    :key="index" 
                                    :label="label" 
                                    :value="value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item  prop="proporNetprofit">
                                <el-input  v-model.trim="typeForm.proporNetprofit" autocomplete="off"></el-input>
                            </el-form-item>
                         <div class="unit-box">%</div>
                        </div>
                        <span v-else>{{typeForm.proporNetprofitEqual|sizefilter }} {{typeForm.proporNetprofit}}%</span>
                 </el-form-item>
           </div>
           <div style="padding:10px 0">
               <el-form-item label="超出标准允许发起审批流程：" prop="orexceed">
                       <template v-if="typeStatus !='view'">
                            <el-radio v-model="typeForm.orexceed" :label="1">是</el-radio>
                            <el-radio v-model="typeForm.orexceed" :label="0">否</el-radio>
                        </template>
                        <span v-else>{{typeForm.orexceed?"是":"否"}}</span>
                 </el-form-item>
           </div>
          
       </el-form>
       
       <p v-if="typeStatus !='view'" style="text-align:center">
            <el-button type="primary"  @click="loadApproval">发起审批</el-button>
            <el-button type="primary" v-if="typeStatus =='add'" @click="addSave(0)">保存</el-button>
            <el-button type="primary" v-if="typeStatus =='edit'" @click="editSave(0)">保存</el-button>
            <el-button type="primary"  @click="back">取消</el-button>
        </p>
        <!-- 审核记录 -> 详情页面显示 -->
        <template  v-else>
            <audit-table :tableData='auditData'></audit-table>
            <p style="text-align:center"> 
                 <el-button type="primary"  @click="back">关闭</el-button>
            </p>
           
        </template>
        
    </div>
    
</template>

<script>
import api from '@/api/apiPath'
import auditTable from '../common/auditTable' //审核记录表
export default {
    components: {
        'audit-table':auditTable,
    },
    computed:{
        inputDisabled(){
            return this.typeForm.examineStatus == 2;
        },
        inPadCommission(){
            return this.typeForm.inPadCommission;
        }
    },
    watch:{
        inPadCommission(val){
            if(!val) {
                this.$set(this.typeForm,'inPadExpiry',null)
            }
        }
    },
	data () {
		return {
            businessLineOptions:[
                {label:"新房",value:0}
            ],
            sizeOptions:[
                {label:"=",value:0},
                {label:"≠",value:1},
                {label:">",value:2},
                {label:"≥",value:3},
                {label:"<",value:4},
                {label:"≤",value:5},
            ],
            modalOptions:[
                
                {label:"包销模式",value:0},
                {label:"分销模式",value:1},
                {label:"合伙人模式",value:2},
                {label:"加盟模式",value:3},
                {label:"保证金模式",value:4},
            ],
            auditData:[],
            typeForm:{
                lineBusiness:0,
                orexceed:1,
                inPadExpiryEqual:0,
                proporNetprofitEqual:0,
                proporEasylifeEqual:0,
                proporBusinessmanEqual:0,

            },
            typeStatus:"",
            pageType:"",
            typeFunction:{//页面状态
                add:()=>{
                    this.pageType = "新增";
                    
                    },
                edit:(id)=>{this.pageType = "编辑";
                    this.loadFromDetail(id);//加载表单信息
                    
                 
                },
                view:(id)=>{ this.pageType = "详情";
                    this.loadFromDetail(id);
                }
            },
            rules:{//验证
               name:[
                    {required: true, trigger: ['blur', 'change'] ,validator: (rule, value, callback) => {
                            if(!value && value!=0) {
                                    return callback(new Error('请输入标准名称'));
                            }
                            if(value.length>20){
                                    return callback(new Error('标准名称长度不能大于20'));
                            }
                            callback();
                        }
                    }
                ],
                lineBusiness: [
                   { required: true, message: '请选择业务线', trigger: ['blur', 'change']}
                ],
                lineType: [
                   { required: true, message: '请选择项目类型', trigger: ['blur', 'change']}
                ],
                lineCollaborat: [
                   { required: true, message: '请选择合作模式', trigger: ['blur', 'change']}
                ],
                inPresale: [
                   { required: true, message: '请选择有无预售证', trigger: ['blur', 'change']}
                ],
                inPadCommission: [
                   { required: true, message: '请选择是否垫佣', trigger: ['blur', 'change']}
                ],
               
                inPadExpiry:[
                    {
                        required: true,
                        validator: (rule, value, callback) => {
                            let flatReg = /^[0-9]?[0-9]+$/;
                            if(!this.typeForm.inPadCommission && !value) return callback();
                            if(!value && value !==0 ) return callback(new Error('不可为空'));
                            if(!flatReg.test(value)){
                                    return callback(new Error('格式不正确'));
                            }
                            callback();
                        }
                    }
                ],
                inEcommerce: [
                   { required: true, message: '请选择是否电商', trigger: ['blur', 'change']}
                ],
                proporBusinessman:[
                    {
                        required: true,
                        validator: (rule, value, callback) => {
                            let flatReg = /^\d+(\.\d{0,2})?$/;
                            if(!value && value!==0) return callback(new Error('不可为空'));
                            if(!flatReg.test(value)){
                                    return callback(new Error('格式不正确'));
                            }
                            if(value>100) this.typeForm.proporBusinessman = 100;
                            callback();
                        }
                    }
                ],
                proporEasylife:[
                    {
                        required: true,
                        validator: (rule, value, callback) => {
                            let flatReg = /^\d+(\.\d{0,2})?$/;
                            if(!value && value!==0) return callback(new Error('不可为空'));
                            if(!flatReg.test(value)){
                                    return callback(new Error('格式不正确'));
                            }
                            if(value>100) this.typeForm.proporEasylife = 100;
                            callback();
                        }
                    }
                ],
                proporNetprofit:[
                    {
                        required: true,
                        validator: (rule, value, callback) => {
                            let flatReg = /^\d+(\.\d{0,2})?$/;
                            if(!value && value!==0) return callback(new Error('不可为空'));
                            if(!flatReg.test(value)){
                                    return callback(new Error('格式不正确'));
                            }
                            if(value>100) this.typeForm.proporNetprofit = 100;
                            callback();
                        }
                    }
                ],
                orexceed: [
                   { required: true, message: '请选择是否超出标准允许发起审批流程', trigger: ['blur', 'change']}
                ],
            },
        }
    },
   
    
    methods:{
        addSave(status){
            this.$refs.typeForm.validate((valid)=>{
                if(!valid){
                    return
                }
                this.typeForm
                let params = {
                    ...this.typeForm,
                    examineStatus:status,
                }
                this.typeForm.inPadRanking = Number(this.typeForm.inPadRanking);
                //垫俑选择否清空
                // if(!this.typeForm.inPadCommission){

                // };
                this.axios.post(api.addProjectcooprtate,params).then((res)=>{
                    if(res.data.code==200){
                         let text = ['添加成功','已发起审批']
                        this.$alert(text[status], '提示', {
                                type: 'success',
                                confirmButtonText: '确定',
                                callback: action => {
                                        this.$router.go(-1)
                                    }
                        });
                    }
                }).catch((error)=>{
                        console.log(error)
                })
            })
            
        },
        editSave(status){
            this.$refs.typeForm.validate((valid)=>{
                if(!valid){
                    return
                }
                this.typeForm.inPadRanking = Number(this.typeForm.inPadRanking);
                let params = {
                     ...this.typeForm,
                    examineStatus:status,
                }
                this.axios.post(api.editProjectcooprtate,params).then((res)=>{
                    if(res.data.code==200){
                         let text = ['编辑成功','已发起审批']
                        this.$alert(text[status], '提示', {
                                type: 'success',
                                confirmButtonText: '确定',
                                callback: action => {
                                        this.$router.go(-1);
                                    }
                        });
                    }
                }).catch((error)=>{
                        console.log(error)
                })
            })
        },
        back(){
            this.$router.go(-1);
        },
        //加载当前页面表单详情
        loadFromDetail(id){
            this.axios.post(`${api.projectcooprtateDetail}`,{id:id}).then(res => {
                if (res.data.code == 200) {
                    this.typeForm = res.data.data.itemcooperate;
                    this.typeForm.inPadRanking = !!this.typeForm.inPadRanking;
                    this.auditData = res.data.data.itemcooperateLogInfo;
                }
            })
        },
        //发起审批
        loadApproval(){
            if(this.typeStatus =='add') this.addSave(1);
            if(this.typeStatus =='edit') this.editSave(1);
        },
	},
	created () {
       let {pageType,insideId} = this.$route.query;
       //更改页面状态（新增/编辑/查看）
       this.typeStatus = pageType;
       this.insideId = insideId;
       //执行该状态init()
       this.typeFunction[pageType](insideId);
    },
	destroyed() {
		
	},
	filters: {
        sizefilter(sizeCode){
            return ["=","≠",">","≥","<","≤"][sizeCode];
        },
        typeFilter(type){
            return ['外部项目','内部项目'][type];
        },
        lineFilter(code){
            return ['新房'][code];
        },
        modalFilter(code){
            return ['包销模式','分销模式','合伙人模式','加盟模式','保证金模式'][code];
        }
	}
}

</script>

<style lang="stylus" >
.projectCooperate{
    p{
        margin:0;
        padding:20px 0;
    }
    .type-item-title{
        font-size:18px;
        color:#303133;
        font-weight :700;
    }
    .back-btn{
        padding:30px 0;
        text-align :center;
    }
    .type-item-box{
        padding-bottom 20px;
        border-bottom :1px solid #ddd;
    }
    .unit-box{
        min-width: 40px;
        text-align:right;
    }
}
.posterurl .el-form-item__label:before{
    content: '*';
    color: #f56c6c;
    margin-right: 4px;
}

</style>
